<template>
    <div>
        <span class="count">{{text}} </span> <span class="qq">时</span>
        <span class="count">{{text1}}</span> <span class="qq">分</span>
        <span class="count">{{text2}}</span> <span class="qq">秒</span>
    </div>
</template>
<script>
    import { mapState, mapGetters } from 'vuex';
    export default {
        data() {
            return {
                show: true,
                count: '',
                timer: null,
                text: "",
                text1: "",
                text2: "",
                d: 0,
                h: 0,
                m: 0,
                s: 0
            }
        },
        mounted: function () {
            var now = new Date();
            console.log(now.getTime())
            const TIME_COUNT1 = Math.floor(1510199000-now.getTime()/1000);
            // var xia = setInterval(() => {
                // const TIME_COUNT1 = 10;
            // }, 1000)
            console.log(TIME_COUNT1)
            if (!this.timer) {
                
                this.count = TIME_COUNT1;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT1) {
                        this.count--;
                        this.d = Math.floor(this.count / 60 / 60 / 24);
                        this.h = Math.floor(this.count / 60 / 60 % 24);
                        this.m = Math.floor(this.count / 60 % 60);
                        this.s = Math.floor(this.count % 60);
                        this.text = this.h
                        this.text1 = this.m
                        this.text2 = this.s
                    } else {
                        clearInterval(this.timer);
                        this.timer = null;
                        this.show = true;
                        var data = {
                            show: true,
                            TIME_COUNT1: 0
                        }
                        this.$store.dispatch("requestHongbao", data)
                    }
                }, 1000)
            }


        },
        computed: {
            ...mapState([
                "TIME_COUNT1"
            ])
        },
    }

</script>
<style scoped>
    .count {
        width: 25px;
        height: 20px;
        background-color: #eee;
        display: inline-block;
        border-radius: 7px;
        text-align: center;
        line-height: 20px;
        color: #999;
        font-size: 13px;
    }

    .qq {
        font-size: 12px;
        color: rgb(252, 229, 185);
    }
</style>